<template>
  <draggable v-model="myArray"
             class="wb-warp"
             animation="300"
             handle=".move-icon"
             chosen-class="chosen"
             force-fallback="true">
    <component :is="componentObj[item.uniqueCode]"
               v-for="(item,index) in myArray"
               :key="index"
               :obj="item"
               @delete-area="deleteArea"
               @change-area="changeArea"
               @default-layout="defaultLayout"
               @update-area="updateArea"></component>
    <el-dialog class="area-dialog"
               title="自定义区块"
               :visible.sync="visible"
               width="30%"
               :before-close="close">
      <span class="area-title">已选区块将展示在工作台，未选的则会隐藏</span>
      <el-transfer class="trans"
                   v-model="value"
                   :data="data"
                   :props="{
                     label:'name',
                     key:'uniqueCode'
                   }"
                   :titles="['未选区块', '已选区块']"
                   :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }">
        <span slot-scope="{ option }">{{option.name}}</span>
      </el-transfer>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="close(true)"
                   icon="el-icon-check"></el-button>
        <el-button @click="close"
                   icon="el-icon-close"></el-button>
      </span>
    </el-dialog>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
import gaisu from './gaisu'
import xiaoxi from './xiaoxi'
import renwu from './renwu'
import shenpi from './shenpi'
import richeng from './richeng'
import shiwu from './shiwu'
import kuaijie from './kuaijie'
import { saveWB, getWB, getAllWB, saveHeight } from './config'

export default {
  components: {
    draggable,
    gaisu,
    xiaoxi,
    renwu,
    shenpi,
    richeng,
    shiwu,
    kuaijie
  },
  watch: {
    myArray: {
      deep: true,
      handler: 'saveData'
    }
  },
  mounted () {
    this.loadOk = false
    getAllWB().then(res => {
      this.data = res.data.data
      return getWB()
    }).then(res => {
      this.myArray = res.data.data.length === 0 ? this.data : res.data.data.map(res => {
        return {
          uniqueCode: res.layoutCode,
          name: res.layoutName,
          height: res.height || this.defaultHeight[res.layoutCode]
        }
      })
      this.$nextTick(() => { this.loadOk = true })
    })
  },
  data () {
    return {
      hideArray: [],
      myArray: [],
      value: [],
      data: [],
      visible: false,
      loadOk: false,
      componentObj: {
        workSum: 'gaisu',
        taskToDo: 'renwu',
        taskToReview: 'shenpi',
        affairToDo: 'shiwu',
        notification: 'xiaoxi',
        schedule: 'richeng',
        quickEntry: 'kuaijie'
      },
      defaultHeight: {
        workSum: 160,
        taskToDo: 250,
        taskToReview: 250,
        affairToDo: 355,
        notification: 360,
        schedule: 250,
        quickEntry: 455
      }
    }
  },
  methods: {
    saveData () {
      if (!this.loadOk) return
      saveWB(this.myArray.map((res, index) => {
        return {
          layoutCode: res.uniqueCode,
          layoutSort: index
        }
      }))
    },
    updateArea ({ uniqueCode, height }) {
      this.myArray.some((res, index) => {
        if (res.uniqueCode === uniqueCode) {
          saveHeight({
            height: height,
            layoutCode: res.uniqueCode
          })
          return true
        }
      })
    },
    close (flag) {
      if (flag === true) {
        if (this.data.filter(res => this.value.indexOf(res.uniqueCode) !== -1).length !== 0) {
          this.$set(this, 'myArray', this.data.filter(res => this.value.indexOf(res.uniqueCode) !== -1))
          this.visible = false
        }
        else this.$message.warning('至少保留一个区块')
      } else this.visible = false
    },
    deleteArea (uniqueCode) {
      this.$confirm('移除后该区块将不会在工作台展示，确认移除？移除的区块可在自定义视图中找回。', '移除区块?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.myArray.length === 1) {
          this.$message.warning('至少保留一个区块')
          return
        }
        this.myArray.some((res, index) => {
          if (res.uniqueCode === uniqueCode) {
            this.myArray.splice(index, 1)
            return true
          }
        })
      })
    },
    changeArea () {
      this.value = this.myArray.map(res => res.uniqueCode)
      this.visible = true
    },
    defaultLayout () {
      this.$confirm('恢复默认将会使用系统默认布局，是否确定？', '恢复默认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        saveWB(this.data.map((res, index) => {
          return {
            layoutCode: res.uniqueCode,
            layoutSort: index
          }
        })).then(res => {
          return getWB()
        }).then(res => {
          this.loadOk = false
          this.myArray = res.data.data.length === 0 ? this.data : res.data.data.map(res => {
            return {
              uniqueCode: res.layoutCode,
              name: res.layoutName,
              height: res.height || this.defaultHeight[res.layoutCode]
            }
          })
          this.$nextTick(() => { this.loadOk = true })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.area-dialog {
  .el-checkbox__label {
    font-size: 12px !important;
  }
  .area-title {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    color: #909399;
  }
}
</style>

<style lang="scss">
.trans {
  .el-transfer__buttons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    .el-button {
      border-radius: 5px;
      padding: 7px 15px;
      &:nth-child(1) {
        margin-bottom: 0;
        margin-right: 10px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.chosen {
  box-shadow: 0 0 5px 1px #3089dc;
  opacity: 0.3;
  width: 100%;
}
.wb-warp {
  padding: 5px;
  margin-top: -10px;
  overflow: auto;
  min-height: calc(100% + 10px);
  column-count: 3;
  column-gap: 0;
  min-width: 1100px;
}
</style>